@import 'compass/utilities/sprites';
// 函数1：sprite-map($glob, ...)
// 使用
// $icon-sprite: sprite-map("icons/*.png",
//                 $new-position: 100%, $new-spacing: 15px, $new-repeat: no-repeat);
$sprites30: sprite-map("wi/30/*.png");
$name: weather_10;
$pad: 0;
$icon-sprite: sprite-map("wi/30/*.png",
                $new-position: 100%, $new-spacing: 15px, $new-repeat: no-repeat);
.a{
    background-image: sprite-url($sprites30);
    background-position: sprite-position($sprites30, $name, -$pad, -$pad);
    background-repeat: no-repeat;
    // 函数2：sprite($map, $sprite, $offset-x, $offset-y, $use-percentages)
    // 使用
    background: $icon-sprite;// 函数1：sprite-map($glob, ...)
    background: sprite($sprites30,$name,$pad,$pad,false);
    background: sprite($sprites30,weather_32,$pad,$pad,true);
    // 函数3：sprite-width($map);获取生成精灵图的宽
    // 使用
    width:sprite-width($sprites30);
    width:sprite-width($icon-sprite);
    // 函数4：sprite-height($map);获取生成精灵图的高
    // 使用
    height:sprite-height($sprites30);
    // 函数5：sprite-path($map);获取生成精灵图的文件系统路径
    // 使用
    background-image: url(sprite-path($sprites30));
    // 函数8：sprite-file($map, $sprite); 获取某个组成精灵图的图片路径
    // 使用
    background-image: url(sprite-file($sprites30, weather_32));
    background-size: image-width(sprite-file($sprites30, weather_32)) image-height(sprite-file($sprites30, weather_32));
    // 函数9：sprite-url($map); 获取精灵图的url
    // 使用
    background-image: sprite-url($sprites30);
    // 函数10:sprite-position($map, $sprite, $offset-x, $offset-y, $use-percentages)
    // 使用
    background-position: sprite-position($sprites30,weather_32);
}
// 函数7：sprite-map-name($map);错误 selector获取组成精灵图的图片名称的列表
// sprite-map-name($sprites30){
//     width:$sprite-width($sprites30);
//     height:$sprite-height($sprites30);
// }
// 函数6：sprite-names($map);错误 selector 获取组成精灵图的图片名称的列表
// 使用 错误
// sprite-names($sprites30){
//     width:$sprite-width($sprites30);
//     height:$sprite-height($sprites30);
// }
// 使用 正确
@mixin all-sprites-weather($map){
    $name:sprite-map-name($map);
    @each $sprite in sprite-names($sprites30){
        .w#{$name}-#{$sprite}{
            @include use-sprite($sprite,$map);
        }
    }
}
@mixin use-sprite($sprite,$map){
    background-image: sprite-url($map);
    background-position: sprite-position($map, $sprite);
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    height: image-height(sprite-file($map, $sprite));
    width: image-width(sprite-file($map, $sprite));
}
@include all-sprites-weather($sprites30);
// 混合宏1 sprites($map, $sprite-names, $base-class, $dimensions, $prefix, $offset-x, $offset-y, $use-percentages, $separator)
// $sprite-names: sprite-names($sprites30);
// 使用
// sprites($sprites30,$sprite-names,wi30,true);
// 混合宏2 sprite($map, $sprite, $dimensions, $offset-x, $offset-y, $use-percentages, $use-magic-selectors, $separator)
// 使用 错误 selector
// .b{
//     sprite($sprites30,weather_32){
//         width: 400px;
//     }
// }